<script setup lang="ts">
import {onMounted} from 'vue'

const emit = defineEmits<{
  (e: 'prev'): void  // 点击前一页
  (e: 'next'): void  // 点击后一页
}>()


// 波纹与回弹动效
const reduceMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false

function addRipple(btn, e) {
  if (reduceMotion) return

  // 先清理旧 ripple，保持最多一个
  btn.querySelectorAll('.ripple').forEach(n => n.remove())

  const rect = btn.getBoundingClientRect()

  // 键盘/程序触发：clientX/Y 通常为 0 —— 视为无坐标，退到按钮中心
  const hasPoint = e && 'clientX' in e && 'clientY' in e && (e.clientX !== 0 || e.clientY !== 0)
  const x = hasPoint ? e.clientX - rect.left : rect.width / 2
  const y = hasPoint ? e.clientY - rect.top : rect.height / 2

  const ripple = document.createElement('span')
  ripple.className = 'ripple'
  ripple.style.setProperty('--x', `${x}px`)
  ripple.style.setProperty('--y', `${y}px`)
  btn.appendChild(ripple)

  const cleanup = () => ripple.remove()
  ripple.addEventListener('animationend', cleanup, {once: true})
  ripple.addEventListener('transitionend', cleanup, {once: true})
  setTimeout(() => ripple.isConnected && cleanup(), 600) // 兜底
}

function withClickFX(btn, handler) {
  btn.addEventListener('click', (e) => {
    if (btn.disabled) return
    // 回弹动效
    btn.classList.remove('press')
    void btn.offsetWidth
    btn.classList.add('press')
    // 波纹
    addRipple(btn, e)
    // 你的业务逻辑
    handler?.()
  })
}

// 用 MouseEvent 主动触发 click，带上“居中坐标”便于波纹居中
function fireClick(btn) {
  if (!btn || btn.disabled) return
  const rect = btn.getBoundingClientRect()
  const ev = new MouseEvent('click', {
    view: window,
    bubbles: true,
    cancelable: true,
    clientX: rect.left + rect.width / 2,
    clientY: rect.top + rect.height / 2
  })
  btn.dispatchEvent(ev)
  // 可选：让焦点跟随，便于无障碍
  btn.focus({preventScroll: true})
}

onMounted(() => {
  const prevBtn = document.getElementById('prevBtn')
  const nextBtn = document.getElementById('nextBtn')

  withClickFX(prevBtn, () => {
    emit('prev')
  })
  withClickFX(nextBtn, () => {
    emit('next')
  })

  const throttleMs = 120  // 键盘节流，避免过快触发
  let lastTs = 0

  document.addEventListener('keydown', (e) => {
    if (e.altKey || e.ctrlKey || e.metaKey) return

    if (e.key === 'ArrowLeft') {
      e.preventDefault()
      if (e.timeStamp - lastTs < throttleMs) return
      lastTs = e.timeStamp
      fireClick(prevBtn)
    } else if (e.key === 'ArrowRight') {
      e.preventDefault()
      if (e.timeStamp - lastTs < throttleMs) return
      lastTs = e.timeStamp
      fireClick(nextBtn)
    }
  })
})
</script>

<template>
  <!-- 两侧切换按钮 -->
  <button class="nav-btn nav-btn--prev" id="prevBtn" aria-label="前一页">
    <svg class="icon" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
      <path d="M15.5 19 8.5 12l7-7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
            stroke-linejoin="round"/>
    </svg>
  </button>

  <button class="nav-btn nav-btn--next" id="nextBtn" aria-label="后一页">
    <svg class="icon" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
      <path d="M8.5 5 15.5 12l-7 7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
            stroke-linejoin="round"/>
    </svg>
  </button>
</template>

<style scoped>
.nav-btn {
  position: fixed;
  top: 45%;
  /* 用变量组合位移+缩放，方便 hover/点击同时生效 */
  --tx: 0px; /* X 方向轻推 */
  transform: translate(var(--tx), -50%) scale(1);
  will-change: transform;

  width: 48px;
  height: 48px;
  min-width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--border-nav-btn);
  color: #E6EDF7;
  background: var(--panel-nav-btn);
  box-shadow: var(--shadow-nav-btn);
  backdrop-filter: blur(10px);
  cursor: pointer;
  outline: none;
  z-index: 1000;
  overflow: hidden; /* overflow 用于波纹裁切 */
  transition: transform .15s ease, background-color .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.nav-btn--prev {
  left: max(12px, env(safe-area-inset-left) + 12px);
}

.nav-btn--next {
  right: max(12px, env(safe-area-inset-right) + 12px);
}

.nav-btn:hover {
  background: var(--panel-hover-nav-btn);
}

.nav-btn--prev:hover {
  --tx: -2px;
}

.nav-btn--next:hover {
  --tx: 2px;
}

.nav-btn:active {
  filter: saturate(1.05);
}

.nav-btn[disabled] {
  opacity: .4;
  cursor: default;
  pointer-events: none;
}

.nav-btn--prev .icon {
  transform: translateX(-2px);
}

.nav-btn--next .icon {
  transform: translateX(2px);
}

/* 点击“回弹”动画（同时保留位移变量） */
@keyframes press-pop {
  0% {
    transform: translate(var(--tx), -50%) scale(.92);
  }
  60% {
    transform: translate(var(--tx), -50%) scale(.96);
  }
  100% {
    transform: translate(var(--tx), -50%) scale(1);
  }
}

.nav-btn.press {
  animation: press-pop .22s cubic-bezier(.2, .8, .2, 1);
}

@keyframes ripple {
  to {
    transform: translate(-50%, -50%) scale(12);
    opacity: 0;
  }
}
</style>

<style>
/* 波纹效果（点击时插入 .ripple 元素） */
.ripple {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .35), transparent 70%);
  transform: translate(-50%, -50%) scale(0);
  opacity: .75;
  filter: blur(.2px);
  animation: ripple .45s ease-out forwards;
}
</style>
